<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/4/5
  Time: 9:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>



<head>



    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>欢迎登录 IOt相册管理系统</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <link href="${pageContext.request.contextPath}/css/main-css.css" rel="stylesheet">

</head>

<style>
    #videoContainer {
        width: 800px;
        height: 500px;
        margin-left: auto;
        border-width: 0px; /* 边框宽度 */
        border-radius: 50px; /* 边框半径 */
        margin-right: auto;
        margin-top: 20px;
    }
</style>


<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">IOT-NB</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">首页</a></li>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <li class="layui-nav-item"><a href="">IOT实训室</a></li>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <li class="layui-nav-item"><a href="http://www.chuangkexueyuan.com.cn/iot-baidu.html">物联网之路</a></li>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <li class="layui-nav-item"><a href="http://www.nlecloud.com/iot2019/">最新赛事</a></li>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <li class="layui-nav-item"><a href="https://jwc.ccu.edu.cn/">教育教学</a></li>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <li class="layui-nav-item"><a href="http://www.chinawuliu.com.cn/xsyj/201807/16/332957.shtml">学术研究</a></li>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/honer.jsp">光辉战绩</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    ${sessionScope.phone}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="${pageContext.request.contextPath}/user/changeUser">切换用户</a></dd>
                    <dd><a href="${pageContext.request.contextPath}/user/outLogin">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/user/cancelUser?phone=${sessionScope.phone}">注销用户</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:">学习资源</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:">java后台开发</a></dd>
                        <dd><a href="javascript:">嵌入式工程</a></dd>
                        <dd><a href="javascript:">安卓开发</a></dd>
                        <dd><a href="">the links</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:">Iot风采</a>
                    <dl class="layui-nav-child">
                        <dd><a href="${pageContext.request.contextPath}/getAlbums">相册管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">menu item 123</a></li>
                <li class="layui-nav-item"><a href="">the links</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body" style="background-image: url('${pageContext.request.contextPath}/img/1.jpg'); margin-bottom: -44px" >
        <!-- 内容主体区域 -->
        <div id="template" style=" padding: 15px ">

            <h1 style="font-size: 40px;margin-left:40px;margin-top: 35px">物联网应用技术</h1>

            <div class="para" label-module="para" style="margin-top: 20px;margin-left: 20px;font-size: 25px">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp本专业培养掌握射频、嵌入式、传感器、无线传输、信息处理、物联网域名等物联网技术，掌握物联网系统的传感层、传输层和应用层关键设计等专门知识和技能，具有从事WSN、RFID系统、局域网、安防监控系统等工程设计、施工、安装、调试、维护等工作的业务能力，具有良好服务意识与职业道德的高端技能型人才。专业课程有C语言程序设计，Java程序设计，TCP/IP网络协议，RFID技术，计算机原理，程序设计原理等。
              </div>
                <noscript>
                    <strong>We're sorry but soucecode doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
                </noscript>
                <div id="videoContainer"></div>
                <!-- built files will be auto injected -->

        </div>

    </div>


</div>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
    });
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/superVideo.js"></script>
<script>
    const nextControl = new Super.NextControl() // 实例化“下一个”按钮控件
    const Dbspeen = new Super.DbspeenControl() // 倍速控件
    const BarrageControl = new Super.BarrageControl() // 弹幕控件
    const fullScreenControl = new Super.FullScreenControl() // 实例化“全屏”控件
    const video = new Super.Svideo('videoContainer', {
        source: new Super.VideoSource({ // 引入视频资源
            src: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Winston_Recall.mp4'
        }),
        leftControls: [nextControl], // 控件栏左槽插入控件
        rightControls: [Dbspeen, fullScreenControl], // 控件栏右槽插入控件
        centerControls: [BarrageControl] // 弹幕控件插入中间插槽
    })
    video.addEventListener('change', (event) => { // 监听video各属性变化
        //  console.log(event)
    })
    nextControl.addEventListener('click', () => { // 监听“下一个”按钮控件点击事件
        alert('click next menu !!!')
    })
    fullScreenControl.addEventListener('fullscreen', () => { // 监听进入全屏
        console.log('is fullscreen !!!')
    })
    fullScreenControl.addEventListener('cancelfullscreen', () => { // 监听退出全屏
        console.log('cancel fullscreen !!!')
    })
    video.addEventListener('fullscreen', () => {
        console.log('is fullscreen !!!')
    })
    video.addBarrage(new Super.Barrage('6666666666', {
        color: 'red'
    }))
    video.addBarrage('冲鸭~~~~~~')
    video.addBarrage('奥里给！！！！！！')
</script>
</body>
</html>
